<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="/static/js/jQuerynew.js"></script>
    <script src="/static/js/jquery.validate.min.js"></script>
    <style>
        form{
        width: 800px;position: absolute;left:0;
        top: 0;
        right: 0; bottom: 0;
        margin: auto;
    }
    .res{
        margin-left: 20px;
    }
    </style>
</head>
<body style="background-color: #ffffff">

        <form action="/addstud/" method="post">
        <input type="text" name="name" id="name" class="form-control" placeholder="姓名" style="background-color: #ffffff"><br>
        <input type="text" name="age" class="form-control" placeholder="年龄" style="background-color: #ffffff"><br>
        <input type="text" name="snumber" id="snumber" value="08-13-14-" class="form-control" placeholder="学号" style="background-color: #ffffff"><br>
        所在班级：
        {% for i in data %}
            <input type="radio" name="classID" value="{{ i.id }}">{{ i.class_name }}&nbsp;
        {% endfor %}

        <br>
        <input type="submit" class="btn btn-default" style="background-color: #E9EEF3">&nbsp;
        <input type="reset" class="btn btn-default" style="background-color: #E9EEF3">
    </form>

    <script>
        $().ready(function () {
            $("form").validate({
                rules:{
                    name:{
                        required:true,
                        minlength:2,
                    },
                    snumber:{
                        required:true,
                        minlength:10,
                        remote: "/ajaxstu/"
                    }
                },
                messages:{
                    name:{
                        required:"姓名必须存在",
                        minlength:"不少于2位"
                    },
                    snumber:{
                        required:"学号必须存在",
                        minlength:"不少于10位",
                        remote: "工号已存在"
                    }
                }
            })
        })
    </script>
</body>
</html>